<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="500" title="货架号设置">
        <Form :model="data" :label-width="60" :rules="ruleValidate" ref="formCreate">
            <Row>
                <BoxCell title="上架单号">{{row.code}}</BoxCell>
                <BoxCell title="产品代码">{{row.product.code}}</BoxCell>
                <BoxCell title="产品名称">{{row.product.title}}</BoxCell>
                <BoxCell title="来货条码">{{row.barcode}}</BoxCell>
                <BoxCell title="数量">{{row.quantity}}</BoxCell>
                <BoxCell title="批次号">{{row.batch}}</BoxCell>
                <BoxCell title="产品属性">{{row.attribute === 0 ? '良品':'不良品'}}</BoxCell>
            </Row>
            <FormItem label="选择货架号" prop="code">
                <Input v-model="data.code">
                    <Button slot="append" icon="ios-search" @click="openComponent('ChooseLocationList')"></Button>
                </Input>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="primary" icon="ios-add" long @click="submit('formCreate')">提交</Button>
        </div>

        <component :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props" @on-location-choose="locationChoose"></component>
    </IDrawer>
</template>

<script>
    import IForm from "../../../components/content/form";
    import contentDrawer from "../../../mixins/contentDrawer";
    import IDrawer from "../../../components/content/drawer";
    import RemoteSelect from "../../../components/form/remoteSelect";
    import ChooseLocationList from "../../../components/form/chooseLocationList";
    import BoxCell from "../../../components/content/boxCell";

    export default {
        name: "iiview",
        mixins: [contentDrawer],
        components: {BoxCell, RemoteSelect, IForm, IDrawer, ChooseLocationList},
        data() {
            return {
                ruleValidate: {},
                data: {},
                row: {product: {}}
            }
        },
        computed: {
            defaultValue: {
                get() {
                    return this.value;
                }, set(v) {
                    if (!v) {
                        this.data.code = '';
                    }
                    return this.$emit('input', v);
                }
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                this.loading = true;
                this.$http.get(`warehousing/shelves/${this.props.id}/edit`, this.data).then((res) => {
                    this.row = res;
                    this.data.code = res.location.code;
                }).finally(() => {
                    this.loading = false;
                });
            },
            locationChoose(row) {
                this.data.code = row.code;
            },
            submit(data) {
                this.validate(data).then(() => {
                    this.loading = true;
                    this.$http.post(`warehousing/shelves/${this.props.id}`, this.data).then(() => {
                        this.defaultValue = false;
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
